<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
    <link rel="shortcut icon" type="image/x-icon" href="assets/img/favicon.ico">
    <title>临床 - 护理 & 医院</title>
    <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="assets/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="assets/css/style.css">
    <!--[if lt IE 9]>
    <script src="assets/js/html5shiv.min.js"></script>
    <script src="assets/js/respond.min.js"></script>
    <![endif]-->
</head>

<body>
<div class="main-wrapper" style="height: 100%;" id="index">
    <div class="header">
        <div class="header-left">
            <a href="index.html" class="logo">
                <img src="assets/img/logo.png" width="35" height="35" alt=""><span id="companyName">{{companySettings.companyName}}</span>
            </a>
        </div>
        <a id="toggle_btn" href="javascript:void(0);"><i class="fa fa-bars"></i></a>
        <a id="mobile_btn" class="mobile_btn float-left" href="#sidebar"><i class="fa fa-bars"></i></a>
        <ul class="nav user-menu float-right">
            <li class="nav-item dropdown d-none d-sm-block">
                <a href="#" class="dropdown-toggle nav-link" data-toggle="dropdown">
                    <i class="fa fa-bell-o"></i>
                    <span class="badge badge-pill bg-danger float-right" id="notificationsSize">{{notifications.length}}</span>
                </a>
                <div class="dropdown-menu notifications">
                    <div class="topnav-dropdown-header">
                        <span>公告</span>
                    </div>
                    <div class="drop-scroll">
                        <ul class="notification-list" id="notifications">
                            <li class="notification-message" v-for="n in notifications">
                                <a href="activities.html">
                                    <div class="media">
											<span class="avatar" v-if="n.avatar.length > 1">
												<img alt="John Doe" :src="notificationImg(n.avatar)" class="img-fluid">
											</span>
                                        <span class="avatar" v-else>
												{{n.avatar}}
											</span>
                                        <div class="media-body">
                                            <p class="noti-details"><span
                                                    class="noti-title">{{n.who}}</span>{{n.done}}<span
                                                    class="noti-title">{{n.something}}</span></p>
                                            <p class="noti-time"><span class="notification-time">{{n.time}}</span></p>
                                        </div>
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="topnav-dropdown-footer">
                        <a href="activities.html">查看所有公告</a>
                    </div>
                </div>
            </li>
            <li class="nav-item dropdown d-none d-sm-block">
                <a href="javascript:void(0);" id="open_msg_box" class="hasnotifications nav-link">
                    <i class="fa fa-comment-o"></i>
                    <span class="badge badge-pill bg-danger float-right">{{messages.length}}</span>
                </a>
            </li>
            <li class="nav-item dropdown has-arrow">
                <a href="#" class="dropdown-toggle nav-link user-link" data-toggle="dropdown">
                        <span class="user-img">
							<img id="img" class="rounded-circle" :src="userImg" width="24" alt="Admin">
							<span class="status online"></span>
						</span>
                    <span id="username">Admin</span>
                </a>
                <div class="dropdown-menu">
                    <a class="dropdown-item" href="profile.html">我的看板</a>
                    <a class="dropdown-item" href="edit-profile.html">编辑看板</a>
                    <a class="dropdown-item" href="settings.html">设置</a>
                    <a class="dropdown-item" href="login.html">退出</a>
                </div>
            </li>
        </ul>
        <div class="dropdown mobile-user-menu float-right">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i
                    class="fa fa-ellipsis-v"></i></a>
            <div class="dropdown-menu dropdown-menu-right">
                <a class="dropdown-item" href="profile.html">我的看板</a>
                <a class="dropdown-item" href="edit-profile.html">编辑看板</a>
                <a class="dropdown-item" href="settings.html">设置</a>
                <a class="dropdown-item" href="login.html">退出</a>
            </div>
        </div>
    </div>
    <div class="sidebar" id="sidebar">
        <div class="sidebar-inner slimscroll">
            <div id="sidebar-menu" class="sidebar-menu">
                <ul>
                    <li class="menu-title">常用功能</li>
                    <li class="active" v-if="modules.dashboard">
                        <a href="dashboard.html" target="content"><i class="fa fa-dashboard"></i> <span>看板</span></a>
                    </li>
                    <li v-if="modules.doctor" title="所有医生的情况">
                        <a href="doctors.html" target="content"><i class="fa fa-user-md"></i> <span>医生</span></a>
                    </li>
                    <li v-if="modules.appointManage" title="医生查看自己的号，可以进行增减。">
                        <a href="appointManage.html" target="content">
                            <i class="fa fa-user-md"></i>
                            <span>挂号管理</span>
                        </a>
                    </li>
                    <li v-if="modules.registration" title="患者进行预约，展示未使用、等候中的号。">
                        <a href="registrations.html" target="content"><i class="fa fa-user-md"></i>
                            <span>预约挂号</span></a>
                    </li>
                    <li v-if="modules.appointment" title="所有患者预约的情况，等候、诊断、完成、过号、取消、作废状态的。">
                        <a href="appointments.html" target="content"><i class="fa fa-calendar"></i>
                            <span>患者的预约</span></a>
                    </li>
                    <li v-if="modules.patient"><!--患者的情况-->
                        <a href="patients.html" target="content"><i class="fa fa-wheelchair"></i> <span>患者</span></a>
                    </li>
                    <li v-if="modules.schedule">
                        <a href="schedule.html" target="content"><i class="fa fa-calendar-check-o"></i>
                            <span>医生排班</span></a>
                    </li>
                    <li v-if="modules.department">
                        <a href="departments.html" target="content"><i class="fa fa-hospital-o"></i>
                            <span>部门管理</span></a>
                    </li>
                    <li class="submenu" id="employee" v-if="modules.invoice">
                        <a href="#"><i class="fa fa-user"></i> <span> 员工 </span> <span class="menu-arrow"></span></a>
                        <ul style="display: none;">
                            <li><a href="employees.html" target="content">员工列表</a></li>
                            <li><a href="leaves.html" target="content">请假</a></li>
                            <li><a href="holidays.html" target="content">假期</a></li>
                            <li><a href="attendance.html" target="content">考勤</a></li>
                        </ul>
                    </li>
                    <li class="submenu" v-if="modules.invoice">
                        <a href="#"><i class="fa fa-money"></i> <span> 会计 </span> <span class="menu-arrow"></span></a>
                        <ul style="display: none;">
                            <li><a href="invoices.html" target="content">票据</a></li>
                            <li><a href="payments.html" target="content">支付</a></li>
                            <li><a href="expenses.html" target="content">开支</a></li>
                            <li><a href="taxes.html" target="content">税收</a></li>
                            <li><a href="provident-fund.html" target="content">福利基金</a></li>
                        </ul>
                    </li>
                    <li class="submenu" v-if="modules.salary">
                        <a href="#"><i class="fa fa-book"></i> <span> 工资 </span> <span class="menu-arrow"></span></a>
                        <ul style="display: none;">
                            <li><a href="salary.html" target="content"> 员工薪酬 </a></li>
                            <li><a href="salary-view.html" target="content"> 工资单 </a></li>
                        </ul>
                    </li>
                    <li v-if="modules.chat">
                        <a href="chat.html" target="content"><i class="fa fa-comments"></i> <span>交流</span> <span
                                class="badge badge-pill bg-primary float-right">5</span></a>
                    </li>
                    <li class="submenu" v-if="modules.call">
                        <a href="#"><i class="fa fa-video-camera camera"></i> <span> 呼叫</span> <span
                                class="menu-arrow"></span></a>
                        <ul style="display: none;">
                            <li><a href="voice-call.html" target="content">语音</a></li>
                            <li><a href="video-call.html" target="content">视频</a></li>
                            <li><a href="incoming-call.html" target="content">来电</a></li>
                        </ul>
                    </li>
                    <li class="submenu" v-if="modules.email">
                        <a href="#"><i class="fa fa-envelope"></i> <span> Email</span> <span class="menu-arrow"></span></a>
                        <ul style="display: none;">
                            <li><a href="compose.html" target="content">Compose Mail</a></li>
                            <li><a href="inbox.html" target="content">Inbox</a></li>
                            <li><a href="mail-view.html" target="content">Mail View</a></li>
                        </ul>
                    </li>
                    <li class="submenu" v-if="modules.blog">
                        <a href="#"><i class="fa fa-commenting-o"></i> <span> 博客</span> <span class="menu-arrow"></span></a>
                        <ul style="display: none;">
                            <li><a href="blog.html" target="content">Blog</a></li>
                            <li><a href="blog-details.html" target="content">Blog View</a></li>
                            <li><a href="add-blog.html" target="content">Add Blog</a></li>
                            <li><a href="edit-blog.html" target="content">Edit Blog</a></li>
                        </ul>
                    </li>
                    <li v-if="modules.asset">
                        <a href="assets.html" target="content"><i class="fa fa-cube"></i> <span>资产</span></a>
                    </li>
                    <li v-if="modules.activitie">
                        <a href="activities.html" target="content"><i class="fa fa-bell-o"></i> <span>操作日志</span></a>
                    </li>
                    <li class="submenu" v-if="modules.report">
                        <a href="#"><i class="fa fa-flag-o"></i> <span> 报告 </span> <span class="menu-arrow"></span></a>
                        <ul style="display: none;">
                            <li><a href="expense-reports.html" target="content"> 费用报告 </a></li>
                            <li><a href="invoice-reports.html" target="content"> 发票报告 </a></li>
                        </ul>
                    </li>
                    <li v-if="modules.setting">
                        <a href="settings-index.html" target="content"><i class="fa fa-cog"></i> <span>设置</span></a>
                    </li>
                </ul>
                <ul v-if="modules.develop">
                    <li class="menu-title">UI 元素</li>
                    <li class="submenu">
                        <a href="#"><i class="fa fa-laptop"></i> <span> 组件</span> <span class="menu-arrow"></span></a>
                        <ul style="display: none;">
                            <li><a href="uikit.html" target="content">UI 工具箱</a></li>
                            <li><a href="typography.html" target="content">排版</a></li>
                            <li><a href="tabs.html" target="content">标签</a></li>
                        </ul>
                    </li>
                    <li class="submenu">
                        <a href="#"><i class="fa fa-edit"></i> <span> 表单</span> <span class="menu-arrow"></span></a>
                        <ul style="display: none;">
                            <li><a href="form-basic-inputs.html" target="content">基本输入</a></li>
                            <li><a href="form-input-groups.html" target="content">复合输入</a></li>
                            <li><a href="form-horizontal.html" target="content">水平表单</a></li>
                            <li><a href="form-vertical.html" target="content">垂直表单</a></li>
                        </ul>
                    </li>
                    <li class="submenu">
                        <a href="#"><i class="fa fa-table"></i> <span> 表格</span> <span class="menu-arrow"></span></a>
                        <ul style="display: none;">
                            <li><a href="tables-basic.html" target="content">基本表格</a></li>
                            <li><a href="tables-datatables.html" target="content">数据表格</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="calendar.html" target="content"><i class="fa fa-calendar"></i> <span>日历</span></a>
                    </li>
                    <li class="menu-title">Extras</li>
                    <li class="submenu">
                        <a href="#"><i class="fa fa-columns"></i> <span>页面</span> <span class="menu-arrow"></span></a>
                        <ul style="display: none;">
                            <li><a href="login.html" target="content"> Login </a></li>
                            <li><a href="register.html" target="content"> Register </a></li>
                            <li><a href="forgot-password.html" target="content"> 忘记密码 </a></li>
                            <li><a href="change-password2.html" target="content"> 修改密码 </a></li>
                            <li><a href="lock-screen.html" target="content"> Lock Screen </a></li>
                            <li><a href="profile.html" target="content"> 个人画像 </a></li>
                            <li><a href="gallery.html" target="content"> 画廊 </a></li>
                            <li><a href="error-404.html" target="content">404 错误 </a></li>
                            <li><a href="error-500.html" target="content">500 错误 </a></li>
                            <li><a href="blank-page.html" target="content"> 空白页 </a></li>
                        </ul>
                    </li>
                    <li class="submenu">
                        <a href="javascript:void(0);"><i class="fa fa-share-alt"></i> <span>Multi Level</span> <span
                                class="menu-arrow"></span></a>
                        <ul style="display: none;">
                            <li class="submenu">
                                <a href="javascript:void(0);"><span>Level 1</span> <span class="menu-arrow"></span></a>
                                <ul style="display: none;">
                                    <li><a href="javascript:void(0);"><span>Level 2</span></a></li>
                                    <li class="submenu">
                                        <a href="javascript:void(0);"> <span> Level 2</span> <span
                                                class="menu-arrow"></span></a>
                                        <ul style="display: none;">
                                            <li><a href="javascript:void(0);">Level 3</a></li>
                                            <li><a href="javascript:void(0);">Level 3</a></li>
                                        </ul>
                                    </li>
                                    <li><a href="javascript:void(0);"><span>Level 2</span></a></li>
                                </ul>
                            </li>
                            <li>
                                <a href="javascript:void(0);"><span>Level 1</span></a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="page-wrapper" style="height: 100%;">
        <iframe id="dashboardFrame" src="" name="content" height="100%" width="100%" frameborder="0"></iframe>
        <div class="notification-box">
            <div class="msg-sidebar notifications msg-noti">
                <div class="topnav-dropdown-header">
                    <span>消息</span>
                </div>
                <div class="drop-scroll msg-list-scroll" id="msg_list">
                    <ul class="list-box" id="messages">
                        <li v-for="m in messages">
                            <a href="chat.html">
                                <div class="list-item">
                                    <div class="list-left"><span class="avatar">{{m.avatar}}</span></div>
                                    <div class="list-body">
                                        <span class="message-author">{{m.who}}</span>
                                        <span class="message-time">{{m.time}}</span>
                                        <div class="clearfix"></div>
                                        <span class="message-content">{{m.something}}</span>
                                    </div>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="topnav-dropdown-footer">
                    <a href="chat.html">查看所有消息</a>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="sidebar-overlay" data-reff=""></div>
<script src="assets/js/vue.global.js"></script>
<script src="assets/js/jquery-3.2.1.min.js"></script>
<script src="assets/js/popper.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/jquery.slimscroll.js"></script>
<script src="assets/js/app.js"></script>
<!--json data-->
<script type="text/javascript" src="json/settings.json"></script>
<script type="text/javascript" src="json/notifications.json"></script>
<script type="text/javascript" src="json/messages.json"></script>
<script type="text/javascript" src="json/module.json"></script>
<script type="text/javascript" src="assets/js/jquerysession.js"></script>
<script type="text/javascript" src="js/data.js"></script>
<script type="text/javascript">
		var name = $.session.get('name');
		if(name == 'undefined'){
			window.location.href="login.html";
		}
		$("#username").html(name);
		
		Vue.createApp({
		  data() {
		    return{
                notifications: null,
                messages: null,
                modules: {},
                companySettings: companySettings
			}
		  },
		  computed: {
			userImg(){
				return "assets/img/" + $.session.get('img');
			}
		  },
		  //此时可以通过vue访问data中的数据和方法，还没创建虚拟dom
		  created(){
			//通知
			this.notifications = notifications.filter((n)=>{return n.mobile == $.session.get('mobile')});
			//消息
			this.messages = messages.filter((m)=>{return m.mobile == $.session.get('mobile')});
			//模块权限
			let myModules = modules.filter((m)=>{return m.role == $.session.get('role')});
			for(var i = 0; i < myModules.length; i++){
				if(myModules[i].visit == "true"){
					this.modules[myModules[i].id] = true;
				}else{
					this.modules[myModules[i].id] = false;
				}
			}
		  },
		  //页面已经挂载vue编译后的dom，此时对dom的操作才会生效
		  mounted(){
			//因为这些li需要经过vue处理才能呈现，所以需要放在这里绑定事件
			$("#sidebar-menu ul li").on('click', function (){
				//把其他的移除
				$("#sidebar-menu ul li").each(function (){
					$(this).removeClass("active");
				});
				//给当前添加
				$(this).addClass("active");
			});
			//设置默认看到的页面
			$("#sidebar-menu").find("li").each(function(index, li){
				if(!$(li).is(":hidden") && $(li).children("a").length > 0){
					$("#dashboardFrame").attr("src", $(li).children("a")[0].href);
					return false;
				}
			});
		  },
		  methods: {
			notificationImg(img){
				return "assets/img/" + img;
			}
		  }
		}).mount('#index');

</script>
</body>

</html>